<template>
  <div class="fixed-icon">
    <img
      src="../../../../common/image/workShotstackImage/fixedIcon.png"
      style="width: 50px; height: 50px"
      @click="fixedIconClick"
    />

    <!-- 花儿AI创作 -->
    <CreateDrawer :visible="visible" @onClose="visible = false" />

    <!-- 弹框登录 -->
    <ShotstackLoginModal
      :visible="loginVisible"
      @onClose="loginVisible = false"
      @loginCallback="loginCallback"
    />
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import CreateDrawer from "./modules/CreateDrawer.vue";
import { useRoute, useRouter } from "vue-router";
import utils from "../../../../common/utils/utils";

export default {
  components: { CreateDrawer },
  setup() {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      count: 0,
      visible: false,
      loginVisible: false,
    });

    const loginCallback = () => {
      state.loginVisible = false;
      router.go(0);
    };

    const fixedIconClick = () => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        state.visible = true;
      });
    };

    return {
      ...toRefs(state),
      fixedIconClick,
      loginCallback,
    };
  },
};
</script>

<style lang="less" scoped>
.fixed-icon {
  position: fixed;
  right: 10px;
  bottom: 50px;
  cursor: pointer;
}
</style>
